<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>首页</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <!-- LayUi 2.2.5 -->
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
  <!-- jQuery 2.2.3 -->
  <script th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>
  <script th:src="@{/layui/layui.js}"></script>
  <style type="text/css">
   ::-webkit-scrollbar  
{  
    width: 8px;  
    height:8px;  
    background-color:#fff;  
} 
::-webkit-scrollbar-thumb{
        background:#ddd;
        border-radius:4px;
    }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo"><img th:src="@{/images/logo.png}" style="vertical-align:middle;padding-right:10px;" />
    	<span style="color:#fff;font-size:20px">路网中心</span></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right" th:if="${user eq null}">
      <li class="layui-nav-item">
      		<a th:href="@{/index}"  target="_top">
              <span class="hidden-xs">登录</span>
            </a>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right" th:if="${user ne null}">
      <li class="layui-nav-item" th:each="mods:${user.modules}" th:if="${#lists.size(#strings.listSplit(mods.parentIds,',')) eq 2}" ><a th:href="${mods.moduleName eq '首页'}?@{/}:@{/index(sysId=${mods.id})}" th:text="${mods.moduleName}"></a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img th:src="@{/dist/img/user2-160x160.jpg}" class="layui-nav-img" /> <span class="hidden-xs" th:text="${user.name}"></span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:void(0);" id="menucolor">换肤</a></dd>
          <dd><a th:href="@{/logout}" >退出</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll" style="width:100%;"  th:if="${user ne null}">
    	 <div style="color:#fff;background-color:#9BA7B7;height:35px;line-height:35px;text-align:center;cursor:pointer;"><i class="layui-icon" style="font-size: 20px; color: #fff;">&#xe68e;</i> </div>
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test" th:if="${sysId ne null}">
        <li class="layui-nav-item" th:each="pas:${user.getNextModules(sysId)}">
          <a class="" href="javascript:;"><span th:text="${pas.moduleName}"></span></a>
          <dl class="layui-nav-child" th:each="item:${user.getNextModules(pas.id)}">
            <dd><a th:if="${user.isLeaf(item.id) eq '1'}"  href="javascript:void(0);" th:id="${'item_'+item.id}"   th:onclick="'javascript:loadFrame(\''+${item.id}+'\',\''+${item.serverId}+'\',\''+${user.getNavInfos(item)}+'\',\''+${item.moduleLink}+'\');'">
           			 <span th:text="${'&nbsp;&nbsp;' +item.moduleName}"></span>
            </a>
            	<li class="layui-nav-item" id="item"><a th:if="${user.isLeaf(item.id) eq '0'}"  href="javascript:void(0);"><span  th:text="${'&nbsp;&nbsp;' +item.moduleName}"></span></a>
            			<dl id="children" style="display:none;" class="layui-nav-child" th:each="three:${user.getNextModules(item.id)}" th:if="${three.isMenu eq '1'}">
            				<dd>
            					
            					<a href="javascript:void(0);" th:id="${'item_'+item.id}"  th:onclick="'javascript:loadFrame(\''+${item.id}+'\',\''+${three.serverId}+'\',\''+${user.getNavInfos(three)}+'\',\''+${three.moduleLink}+'\');'">
             			<span th:text="${three.moduleName}"></span></a>
            				
            				</dd>
            			
            			</dl>
            	
            	</li>
            	
            
            </dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 2px;">
    		<span class="layui-breadcrumb" style="display:none;" id="navPId">
			  <a href="#" id="navId" >首页</a>
			</span>
			
			<div class="layui-tab" style="margin:0;" lay-filter="index" lay-allowclose="true">
				  <ul class="layui-tab-title">
				  	<li class="layui-this" lay-id="1">首页</li>
				  </ul>
				  <div class="layui-tab-content">
				  	<div class="layui-tab-item layui-show">
				  		<iframe id="frameContentId"  frameborder="0" th:src="@{/appli}" width="100%;" height="100%"></iframe>
				  	</div>
				  </div>
				</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    <div class="pull-right hidden-xs">
      <b>Version</b> 0.0.1
    </div>
  </div>
</div>
</div>
 <script th:src="@{/plugins/jQuery/jquery.cookie.js}"></script>
 <script  th:inline="javascript" type="text/javascript">
 /*<![CDATA[*/
var element =null;
 var layer =null;
$(function(){
	var aRoot = /*[[${sysId}]]*/
	if(!aRoot){
		var cotextRoot = /*[[@{/}]]*/
		window.location.href =  cotextRoot;
	}
	//JavaScript代码区域
	layui.use(['element','layer'], function(){
	   element = layui.element;
	   layer = layui.layer;
	});
	
	$("#item a").on("click",function(){
		     $(this).next().toggle();
		     var flag = $("#children").is(":hidden");
		     if(flag){
		    	 $(this).parent().attr("class","layui-nav-item");
		     }else{
			     $(this).parent().attr("class","layui-nav-item layui-nav-itemed");
		     }
		  });
	$("#menucolor").click(function(){
		var html = "<ul style='list-style:none;margin:0;padding:0;'>"
					+"<li style='float:left; padding: 10px;width:100px;'>"
					+"<a href='javascript:void(0);' onclick='setSkin(this)'>"
					+"<div><span style='display:block; width: 20%; float: left; height: 12px; background-color: #367fa9;'></span><span  style='display:block; width: 80%; float: left; height: 12px;background-color:#3c8dbc;'></span></div>"
					+"<div><span style='display:block; width: 20%; float: left; height: 40px; background-color: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background-color: #f4f5f7;'></span></div>"
					+"</a>"
					+"<p style='text-align:center;'>Blue Dark</p>"
					+"</li>"
					+"<li style='float:left; padding: 10px;width:100px;'>"
					+"<a href='javascript:void(0);' onclick='setSkin(this)'>"
					+"<div><span style='display:block; width: 20%; float: left; height: 12px; background-color: #367fa9;'></span><span  style='display:block; width: 80%; float: left; height: 12px;background-color:#3c8dbc;'></span></div>"
					+"<div><span style='display:block; width: 20%; float: left; height: 40px; background-color: #6e6e6e;'></span><span style='display:block; width: 80%; float: left; height: 40px; background-color: #f4f5f7;'></span></div>"
					+"</a>"
					+"<p style='text-align:center;'>Blue Gray</p>"
					+"</li>"
					+"<li style='float:left; padding: 10px;width:100px;'>"
					+"<a href='javascript:void(0);' onclick='setSkin(this)'>"
					+"<div><span style='display:block; width: 20%; float: left; height: 12px; background-color: #d33724;'></span><span  style='display:block; width: 80%; float: left; height: 12px;background-color:#dd4b39;'></span></div>"
					+"<div><span style='display:block; width: 20%; float: left; height: 40px; background-color: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background-color: #f4f5f7;'></span></div>"
					+"</a>"
					+"<p style='text-align:center;'>Red Dark</p>"
					+"</li>"
					+"<li style='float:left; padding: 10px;width:100px;'>"
					+"<a href='javascript:void(0);' onclick='setSkin(this)'>"
					+"<div><span style='display:block; width: 20%; float: left; height: 12px; background-color: #d33724;'></span><span  style='display:block; width: 80%; float: left; height: 12px;background-color:#dd4b39;'></span></div>"
					+"<div><span style='display:block; width: 20%; float: left; height: 40px; background-color: #6e6e6e;'></span><span style='display:block; width: 80%; float: left; height: 40px; background-color: #f4f5f7;'></span></div>"
					+"</a>"
					+"<p style='text-align:center;'>Red Gray</p>"
					+"</li>"
					+"<li style='float:left; padding: 10px;width:100px;'>"
					+"<a href='javascript:void(0);' onclick='setSkin(this)'>"
					+"<div><span style='display:block; width: 20%; float: left; height: 12px; background-color: #008d4c;'></span><span  style='display:block; width: 80%; float: left; height: 12px;background-color:#00a65a;'></span></div>"
					+"<div><span style='display:block; width: 20%; float: left; height: 40px; background-color: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background-color: #f4f5f7;'></span></div>"
					+"</a>"
					+"<p style='text-align:center;'>Green Dark</p>"
					+"</li>"
					+"<li style='float:left; padding: 10px;width:100px;'>"
					+"<a href='javascript:void(0);' onclick='setSkin(this)'>"
					+"<div><span style='display:block; width: 20%; float: left; height: 12px; background-color: #008d4c;'></span><span  style='display:block; width: 80%; float: left; height: 12px;background-color:#00a65a;'></span></div>"
					+"<div><span style='display:block; width: 20%; float: left; height: 40px; background-color: #6e6e6e;'></span><span style='display:block; width: 80%; float: left; height: 40px; background-color: #f4f5f7;'></span></div>"
					+"</a>"
					+"<p style='text-align:center;'>Green Gray</p>"
					+"</li>"
					+"<li style='float:left; padding: 10px;width:100px;'>"
					+"<a href='javascript:void(0);' onclick='setSkin(this)'>"
					+"<div><span style='display:block; width: 20%; float: left; height: 12px; background-color: #555299;'></span><span  style='display:block; width: 80%; float: left; height: 12px;background-color:#605ca8;'></span></div>"
					+"<div><span style='display:block; width: 20%; float: left; height: 40px; background-color: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background-color: #f4f5f7;'></span></div>"
					+"</a>"
					+"<p style='text-align:center;'>Purple Dark</p>"
					+"</li>"
					+"<li style='float:left; padding: 10px;width:100px;'>"
					+"<a href='javascript:void(0);' onclick='setSkin(this)'>"
					+"<div><span style='display:block; width: 20%; float: left; height: 12px; background-color: #555299;'></span><span  style='display:block; width: 80%; float: left; height: 12px;background-color:#605ca8;'></span></div>"
					+"<div><span style='display:block; width: 20%; float: left; height: 40px; background-color:#6e6e6e;'></span><span style='display:block; width: 80%; float: left; height: 40px; background-color: #f4f5f7;'></span></div>"
					+"</a>"
					+"<p style='text-align:center;'>Purple Gray</p>"
					+"</li>"
					+"</ul>";
		layer.open({
			  type: 1,
			  title: "选择皮肤配色",
			  closeBtn: 1,
			  area: ['480px', '235px'],
			  shadeClose: true,
			  skin: 'layui-layer-molv' ,
			  content: html
			});
		 
	});
	resizeWin();
	$(window).resize( function(){
	    resizeWin();
	});
	if ($.cookie("logoskin") != "" && $.cookie("logoskin")!= undefined) {
		  $(".layui-logo").css('background-color',$.cookie("logoskin"));
	  }
	if ($.cookie("headerskin") != "" && $.cookie("headerskin")!= undefined) {
		  $(".layui-header").css('background-color',$.cookie("headerskin"));
	  }
	if ($.cookie("menuskin") != "" && $.cookie("menuskin")!= undefined) {
		  $(".layui-bg-black").css('background-color',$.cookie("menuskin"));
	  }
});
function resizeWin(){
	var height = $(window).height()-173;
	$("#frameContentId").css("height",height+"px");
	$("#mainFrame").css("height",height+"px");
}

function setSkin(obj){
	var logoCor = $(obj).find("div").eq(0).find("span").eq(0).css("background-color");
	$(".layui-logo").css('background-color',logoCor);
	$.cookie("logoskin",logoCor, { expires: 7 });
	
	var headerCor = $(obj).find("div").eq(0).find("span").eq(1).css("background-color");
	$(".layui-header").css('background-color',headerCor);
	$.cookie("headerskin",headerCor, { expires: 7 });
	
	var menuCor = $(obj).find("div").eq(1).find("span").eq(0).css("background-color");
	$(".layui-bg-black").css('background-color',menuCor);
	$.cookie("menuskin",menuCor, { expires: 7 });
	
}
 //http://note.youdao.com/noteshare?id=a9d8283cf1e08ab3b32baee13c5c9834&sub=C027743F5EB54733A05CC2409F45357C
 function locationUrl(){
	 //alert(2);
	 window.open("http://note.youdao.com/share/?id=a9d8283cf1e08ab3b32baee13c5c9834&type=note#/");
 }
function loadFrame(aid,serverId,navInfo,link){
			//$("[name='selectN']").removeClass();
			var cityElement=document.getElementById("item_"+aid).parentNode;
			cityElement.className= "active";
			$("#navId").nextAll().remove();
			var bs = navInfo.split(",");
			var blen = bs.length; 
			var title=bs[blen-1];
			for(var i=blen -1;i>=0;i--){
				if(i == blen -1){
					//$("#titleId").html(bs[i]);
					$("#navId").after("<a href='#'><cite>"+bs[i]+"</cite></a>"); 
				}else{
					$("#navId").after("<a href='#'>"+bs[i]+"</a>");
				}
			}
			var cotextRoot = /*[[@{/}]]*/
			if(null == serverId || 'null' == serverId){
				var html = "<iframe style='width:100%;border:0;' id='mainFrame_"+aid+"' src='"+cotextRoot+link+"'  scrolling='no'></iframe>";
				element.tabDelete('index',aid);
				element.tabAdd('index', {title: title,content: html,id: aid});
				element.tabChange('index', aid);
			}else{
				var html = "<iframe style='width:100%;border:0;' id='mainFrame_"+aid+"' src='"+serverId+'/'+link+"'  scrolling='no'></iframe>";
				element.tabDelete('index',aid);
				element.tabAdd('index', {title: title,content: html,id: aid});
				element.tabChange('index', aid);
			}
			var height = $(window).height()-173;
			$("#mainFrame_"+aid).css("height",height+"px");
}
/*]]>*/
</script>
</body>
</html>